<template>
	<ul class="el-upload-list el-upload-list--picture" :id="id">
		<!-- <li style="position: absolute; top: 120px;"><el-progress :percentage="100" status="success" ></el-progress></li> -->
		<li  v-if="images&&images.length<=0">暂无图片列表</li>
		<template  v-for="(item, index) in images" >
	    	<li class="el-upload-list__item is-success"  v-if="item != '' " style="width:16%;margin-right:5px;display:inline-block;">
	    		<img :src="item" alt="" class="el-upload-list__item-thumbnail"  @click="Viewer" style="cursor:pointer">
	    		<template v-if="canDelete">
	    			<label  class="el-upload-list__item-status-label">
	            	    <i class="el-icon-upload-success el-icon-check"></i>
	                </label>
	                <i  class="el-icon-close" @click="delImg(index)"></i>
	    		</template>
	            
	        </li>
        </template>
    </ul>
</template>
<script>
    import Viewer from "static/viewer/viewer.js"
    var viewer="";
	export default{
		watch:{
		},
		name:"pictureList",
		props:['images','id','canDelete'],
		methods:{
			Viewer(){
				viewer=new Viewer(document.getElementById(this.id),{  
					fullscreen:false,
					hide: function (){  
						viewer.update();
						viewer.destroy()
				    },
				    show:function(){
				    	viewer.update();
				    } 
			    });
			},
			delImg(index){
				var imageUrl = this.images;
				if ( imageUrl.length > 0) { 
					imageUrl.splice(index,1);
					this.$message({
				        type: 'success',
				        message: '删除成功!'
				    });
				}
			}
		}
	}
</script>
<style scoped  >
	@import './../../../static/viewer/viewer.styl';
</style>